<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
    model: Object
})

const isOpen = ref(false)
const isFolder = computed(() => {
    return props.model.children && props.model.children.length
})

function toggle() {
    isOpen.value = !isOpen.value
}

function changeType() {
    if (!isFolder.value) {
        props.model.children = []
        addChild()
        isOpen.value = true
    }
}

function addChild() {
    props.model.children.push({ name: 'new stuff '})
}
</script>

<template>
    <li>
        <div :class="{ bold: isFolder }" @click="toggle" @dbclick="changeType">
            {{ model.name }}
            <span v-if="isFolder">[{{ isOpen ? '-' : '+'}}]</span>
        </div>
        <ul v-show="isOpen" v-if="isFolder">
            <TreeItem class="item" v-for="model in model.children" :model="model"></TreeItem>
        </ul>
        <li class="add" @click="addChild">+</li>
    </li>
</template>